<template>
    <view>
        <!--小程序端的标题-->
        <view class="cu-bar">
            <view class="action" @tap="BackPage" style="margin-left: 15rpx !important;">
                <u-icon name="arrow-left" color="#ffffff" size="35"></u-icon>
            </view>
            <view class="textcenter">店铺</view>
            <view></view>
        </view>
        <!-- 详情 -->
        <view class="ma_all">
            <!-- 顶部图片 -->
            <view class="top_img">
                <image :src="businessInfo.backgroundPicture" mode="aspectFill"></image>
                <view class="yin"></view>
            </view>
            <!-- 头部店铺详情框 -->
            <view class="top_detail">
                <view class="ma_name">
                    <view style="font-size: 34upx;font-weight: 550;">{{ businessInfo.name }}</view>
                    <view class="rightimg">
                        <image :src="businessInfo.image" class="radius" mode="aspectFill"></image>
                        <view class="juli" v-if="0">
                            距您{{ businessInfo.distance > 1000 ? Math.round(businessInfo.distance / 1000) + 'km' : businessInfo.distance + 'm' }}
                        </view>
                    </view>
                </view>
                <view class="ma_addr">{{ businessInfo.address }}</view>
                <view class="ma_youhui">
                    <image src="../../static/qietu/youhuiquan.png" mode="aspectFill"></image>
                    拥有店铺
                    <text style="color: #f9621c;" class="margin-lr-xs">{{ couponsInfo.length }}张</text>
                    优惠券
                </view>
                <view class="ma_lianxi">
                    <view class="ma_youhui">
                        <text style="margin-right: 25rpx;">营业中</text>
                        <text>{{ businessInfo.businessHours }}</text>
                    </view>
                    <view class="ma_addr">
                        <view class="ma_daozheli" @click="viewMapLocation">
                            <u-icon name="map-fill" color="#f9cd3a" size="33" class="margin-right-xs"></u-icon>
                            <text style="margin-right: 25rpx;">去这里</text>
                        </view>
                        <view class="ma_daozheli" @click="getNum">
                            <u-icon name="phone-fill" color="#f9cd3a" size="33" class="margin-right-xs"></u-icon>
                            <text>联系商家</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 优惠券框框 -->
            <view class="ma_youhq" v-if="couponsInfo.length > 0">
                <view class="ma_lianxi">
                    <view class="fonts">优惠券</view>
                    <!-- <view style="color: #f9621c;align-items: center;">领券 <u-icon name="arrow-right" color="#f9621c" size="28"></u-icon></view> -->
                </view>
                <!-- 优惠券列表 -->
                <view class="ticketlist">
                    <view class="ticket" v-for="(item, index) in couponsInfo" :key="index" @click="getCoupon(item.user_code)">
                        <block v-if="item.merchant_id == id">
                            <view class="left flex flex-direction align-center justify-around">
                                <text class="use">使</text>
                                <text class="use">用</text>
                            </view>
                            <view class="right">
                                <view class="introduce">
                                    <view class="top flex align-center">
                                        <text class="big text-price">{{ item.price || '暂未设置' }}</text>
                                        <!-- <text>{{ item.name || '暂未设置' }}</text> -->
                                    </view>
                                    <view class="date u-line-1">{{ item.usage_time || '暂未设置' }}</view>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
            <view class="ma_youhq">
                <text class="fonts">商家介绍</text>
                <view class="fxgou">
                    <view class="fxgou">
                        <view class="dot"></view>
                        <text>{{ businessInfo.merchantService }}</text>
                    </view>
                    <!-- <view class="fxgou">
						<view class="dot"></view>
						<text>质量有保障</text>
					</view> -->
                </view>
                <view class="fonts">公告</view>
                <view style="color: #aaaaaa;font-size: 23upx;line-height: 32upx;">
                    <text>{{ businessInfo.announcement }}</text>
                </view>
            </view>
            <!-- 商品列表 -->
            <view class="ma_youhq shangpin" v-for="(item, index) in businessInfo.products" @click="jump(item.id)" :key="index">
                <image style="width: 140rpx;height: 140rpx;" :src="item.image" class="radius" mode="aspectFill"></image>
                <view style="margin-left: 30rpx; width: 70vw;">
                    <view class="titles fonts">{{ item.denomination }}</view>
                    <view class="biaoqian">
                        <view class="biaoqians flex flex-direction" v-for="(item1, index1) in item.classification" :key="index1">
                            <uni-tag :type="primary" inverted="false" :text="item1"></uni-tag>
                        </view>
                    </view>
                    <text style="color: #f9621c ;">￥{{ item.price }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
import uniTag from '@/components/uni-tag/uni-tag.vue';
import _tool from '@/utils/tools.js'; //工具函数
export default {
    components: {
        uniTag,
    },
    data() {
        return {
            businessInfo: {},
            couponsInfo: [],
            id: '',
        };
    },
    onReady() {
        _tool.setBarColor(true);
    },
    onLoad(options) {
        console.log(options.id);
        var that = this;
        this.id = options.id;
        app.globalData.api.getBusinessDetails(options.id).then(res => {
            res.resultObj.products.forEach(item => {
                item.classification = item.classification
                    .replace(/"/g, '')
                    .replace('[', '')
                    .replace(']', '')
                    .split(',');
            });
            that.businessInfo = res.resultObj;
        });
        // app.globalData.api.getCouponsByMerchantId({ merchantId: options.id }).then(res => {
        // 	that.couponsInfo = res.resultObj;
        // });

        var that = this;
        app.globalData.api.getMerchantCoupon({ couponDate: '' }).then(res => {
            console.log('res: ', res);
            that.couponsInfo = res.resultObj;
        });
    },
    methods: {
        // 没有在登录的时候获取自己的定位 而是点击事件 调用viewMapLocation()这个方法时获取了自己的定位
        //因考虑到用户拒绝获取自己的定位所以当用户再次点击后会唤起设置让用户打开定位

        // 这里传入的三个参数分别是  要去的  经度 纬度 以及 地址信息
        viewMapLocation(longitudee = '104.07364', latitude = '30.68841', address='成都市人民北路二段118号') {
            //  这里因为我是子组件传参过来了导致 经纬度变成了String 类型所以进行了一次转换
            var latitude = Number(latitude);
            var longitude = Number(longitudee);
            // 获取定位信息
            uni.getLocation({
                type: 'wgs84', //返回可以用于uni.openLocation的经纬度
                // 用户允许获取定位
                success: function(res) {
                    console.log(res, '经纬度');
                    if (res.errMsg == 'getLocation:ok') {
                        // console.log('latitude :>> ', latitude);
                        // console.log('longitude :>> ', longitude);
                       
                       
                        uni.openLocation({
                            // 传入你要去的纬度
                            latitude: 30.68841,
                            // 传入你要去的经度
                            longitude: 104.07364,
                            // 传入你要去的地址信息 不填则为空
                            address: address,
                            // 缩放大小
                            scale: 18,
                            success: function() {
                                console.log('success');
                            },
                        });
                    }
                },
                // 用户拒绝获取定位后 再次点击触发
                fail: function(res) {
                    console.log(res);
                    if (res.errMsg == 'getLocation:fail auth deny') {
                        uni.showModal({
                            content: '检测到您没打开获取信息功能权限，是否去设置打开？',
                            confirmText: '确认',
                            cancelText: '取消',
                            success: res => {
                                if (res.confirm) {
                                    uni.openSetting({
                                        success: res => {
                                            console.log('确定');
                                        },
                                    });
                                } else {
                                    console.log('取消');
                                    return false;
                                }
                            },
                        });
                    }
                },
            });
        },

        getNum() {
            // contactNumber
            uni.makePhoneCall({
                phoneNumber: this.businessInfo.contactNumber, //仅为示例
            });
        },
        jump(id) {
            uni.navigateTo({
                url: '/pages/shangpin_detail/shangpin_detail?id=' + id,
            });
        },
        getCoupon(user_code) {
            // var userId = app.globalData.smmUser.id;
            // app.globalData.api.addUserCoupon({ userId: userId, couponId: couponId }).then(res => {
            // 	if (res.message == '操作成功!') {
            // 		uni.showModal({
            // 			title: res.resultObj,
            // 		});
            // 	}
            // });
            uni.navigateTo({
                url: '/pages/user-center/mine?user_code=' + user_code,
            });
        },
        BackPage() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.cu-bar {
    padding-top: 70rpx;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0);
    z-index: 30;
}
.textcenter {
    font-size: 35upx;
    color: #ffffff;
}
.top_img {
    position: relative;
    width: 750rpx;
    height: 300rpx;
    overflow: hidden;
    margin-top: -120rpx;

    image {
        width: 750rpx;
    }
    .yin {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
}
.top_detail {
    position: relative;
    top: -38rpx;
    width: 705rpx;
    margin: 0 auto;
    padding: 20rpx;
    border-radius: 20rpx;
    line-height: 53rpx;
    background-color: #ffffff;

    .ma_name {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;

        .rightimg {
            position: absolute;
            top: -45rpx;
            right: 30rpx;
        }
        .rightimg image {
            width: 120rpx;
            height: 120rpx;
            z-index: 3;
        }
        .juli {
            padding: 0 5rpx;
            height: 43rpx;
            line-height: 43rpx;
            font-size: 24upx;
            border-radius: 6rpx;
            background: linear-gradient(to right, #ffe68a, #f8d041);
        }
    }
    .ma_addr {
        display: flex;
        font-size: 29upx;
        color: #6f6f6f;

        .ma_daozheli {
            display: flex;
        }
    }
    .ma_youhui {
        font-size: 29upx;
        color: $uni-text-color-grey;
        display: flex;
        align-items: center;

        image {
            width: 35rpx;
            height: 26rpx;
            margin-right: 15rpx;
        }
    }
}
.ma_lianxi {
    display: flex;
    justify-content: space-between;
}
.ma_youhq {
    width: 705rpx;
    margin: -17rpx auto 38rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    line-height: 53rpx;
    background-color: #ffffff;

    .ticketlist {
        display: flex;
        width: 100%;
        overflow: auto;
        overflow-x: scroll;

        .ticket {
            display: flex;
            margin-right: 20rpx;
            .left {
                display: flex;
                width: 100rpx;
                height: 130rpx;
                border-left: 7px solid #935035 !important;
                padding: 10rpx 20rpx;
                background-color: #fce999;
                border-top-left-radius: 20rpx;
                border-bottom-left-radius: 20rpx;
                // border-top-right-radius: 50rpx;
                // border-bottom-right-radius: 50rpx;
                border-right: dashed 2rpx rgb(224, 215, 211);

                .use {
                    font-size: 34rpx;
                    border-radius: 40rpx;
                    color: #7a7a7a !important;
                    line-height: 1;
                    margin: 0 auto;
                }
            }
            .right {
                width: 250rpx;
                height: 130rpx;
                padding: 10rpx 20rpx;
                background-color: #fce999;
                border-top-right-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
                // border-top-left-radius: 50rpx;
                // border-bottom-left-radius: 50rpx;
                display: flex;
                align-items: center;
                // border-left: dashed 2rpx rgb(224, 215, 211);

                .introduce {
                    margin-left: 10rpx;
                    .top {
                        color: #935035;
                        font-size: 28rpx;
                        .big {
                            font-size: 40rpx;
                            line-height: 1;
                            font-weight: bold;
                            margin-right: 10rpx;
                        }
                    }
                    .date {
                        margin-top: 10rpx;
                        font-size: 20rpx;
                        color: #d16c00;
                    }
                }
            }
        }
    }
}
.fxgou {
    display: flex;
    color: #84878c;
    align-items: center;
    margin-right: 30rpx;

    .dot {
        margin: 10rpx 20rpx;
        width: 15rpx;
        height: 15rpx;
        background-color: #84878c;
        border-radius: 20rpx;
    }
}
.shangpin {
    display: flex;
    overflow: hidden;

    .titles {
        // width: 500rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.fonts {
    font-weight: 600;
    color: #565656;
}
/* 标签 */
.biaoqian {
    display: flex;
    flex-wrap: wrap;
    margin: 3rpx;
}
.biaoqians {
    margin-right: 6rpx;
    margin-bottom: 6rpx;
    color: #747474;
}
</style>
